<template>
    <div class="page login"> 
        <div class="main">
            <div class="logo">销装维管理系统</div>
            <x-input text-align="center" class="input" v-model="username" placeholder="用户名" ref='username' :show-clear='false'></x-input>
            <x-input text-align="center" class="input" v-model="password" placeholder="密码" type="password" ref='password' :show-clear='false'></x-input>
            <a class="input btn-submit" @click="login">登录</a>
            <a class="input btn-submit" href="/xzww/register">注册</a>
        </div>
    </div>
</template>

<script>

    import { XHeader, XButton, XInput } from 'vux'

    export default {
        components: {
            XHeader,
            XButton,
            XInput,
        },
        data () {
            return {
                username: '',
                password: '',
            }
        },
        created(){
            
        },
        methods: {
            login(){
                if(!this.username.trim()){
                    this.toastFail("请输入用户名", "200px")
                    return;
                }
                if(!this.password.trim()){
                    this.toastFail("请输入密码", "200px")
                    return;
                }
                this.$vux.loading.show()
                let params = {
                    id: this.username,
                    pwd: this.password,
                    rememberMe: true
                }
                this.$post("/anapi/LoginController/login", params, (data) => {
                    this.$router.replace('./install')
                })
            },
        },
    }

</script>

<style lang="less" scoped>
    @baseColor: #1aad19;
    .main{
        padding: 100px 30px 0;
        background: linear-gradient(170deg, rgba(0, 198, 251, 1) 0%, rgba(0, 198, 251, 1) 0%, rgba(0, 91, 234, 1) 100%, rgba(0, 91, 234, 1) 100%);
        .logo{
            font-family: '幼圆 Bold', '幼圆';
            font-weight: 700;
            font-style: normal;
            font-size: 36px;
            color: #FFFFFF;
            text-align: center;
            margin-bottom: 50px;
        }
        .input{
            width: 100%;
            height: 40px;
            padding: 0;
            border: 1px solid #fff;
            border-radius: 40px;
            text-align: center;
            line-height: 40px;
            font-size: 14px;
            margin-bottom: 20px;
            color: #fff;
            &:before{
                display: none;
            }
        }
        ::-webkit-input-placeholder{
            color: #fff;
        }
        .btn-submit{
            display: block;
            background: #fff;
            color: @baseColor;
        }
        p{
            text-align: center;
        }
    }
</style>



